import React, { useEffect } from 'react';

import {
  NodeSelect,
  NodeAutoInput,
  NodeArrayObject,
  NodeDifficult,
  NodeReadOnly,
  NodeInput,
  NodeTextArea,
  NodeCode,
  NodeUserDefined,
  NodeBoolean,
  NodeRadio,
} from './index';

import { Form, Row, Col, Input } from 'antd';

interface propsType {
  nodeData: any;
  onFormChange: any;
}

const labelStyle: React.CSSProperties = {
  overflow: 'hidden',
  whiteSpace: 'nowrap',
  textOverflow: 'ellipsis',
};

export const NodeForm: React.FC<propsType> = ({ nodeData, onFormChange }) => {
  const [form] = Form.useForm();

  useEffect(() => {
    if (nodeData?.data?.valueObj) {
      form.setFieldsValue({
        ...nodeData?.data?.valueObj,
        text: nodeData?.text,
      });
    } else {
      form.setFieldsValue({
        text: nodeData?.text,
      });
    }
  }, [nodeData]);

  return (
    <Form
      form={form}
      wrapperCol={{
        span: 16,
      }}
      labelCol={{
        span: 8,
      }}
      onValuesChange={onFormChange}
    >
      <Row gutter={[8, 8]}>
        <Col span={24}>
          <Form.Item name="text" label="节点名称">
            <Input placeholder="节点名称" />
          </Form.Item>
        </Col>
        {nodeData?.data?.customData &&
          nodeData?.data?.customData?.length > 0 &&
          renderNodeItem(nodeData?.data?.customData)}
      </Row>
    </Form>
  );
};

const renderNodeItem = (nodeData: any[]) => {
  return nodeData?.map((item, index) => {
    switch (item?.valueType) {
      case 'Select':
        return (
          <Col span={24} key={index}>
            <Form.Item
              name={item?.label}
              label={
                <span title={item?.labelName} style={labelStyle}>
                  {item?.labelName}
                </span>
              }
            >
              <NodeSelect data={item} />
            </Form.Item>
          </Col>
        );
      case 'AutoInput':
        return (
          <Col span={24} key={index}>
            <Form.Item
              name={item?.label}
              label={
                <span title={item?.labelName} style={labelStyle}>
                  {item?.labelName}
                </span>
              }
            >
              <NodeAutoInput data={item} />
            </Form.Item>
          </Col>
        );
      case 'ArrayObject':
        return (
          <Col span={24} key={index}>
            <Form.Item
              name={item?.label}
              label={
                <span title={item?.labelName} style={labelStyle}>
                  {item?.labelName}
                </span>
              }
            >
              <NodeArrayObject data={item} />
            </Form.Item>
          </Col>
        );
      case 'Difficult':
        return (
          <Col span={24} key={index}>
            <Form.Item
              name={item?.label}
              label={
                <span title={item?.labelName} style={labelStyle}>
                  {item?.labelName}
                </span>
              }
            >
              <NodeDifficult data={item} />
            </Form.Item>
          </Col>
        );
      case 'ReadOnly':
        return (
          <Col span={24} key={index}>
            <Form.Item
              name={item?.label}
              label={
                <span title={item?.labelName} style={labelStyle}>
                  {item?.labelName}
                </span>
              }
            >
              <NodeReadOnly data={item} />
            </Form.Item>
          </Col>
        );
      case 'Input':
        return (
          <Col span={24} key={index}>
            <Form.Item
              name={item?.label}
              label={
                <span title={item?.labelName} style={labelStyle}>
                  {item?.labelName}
                </span>
              }
            >
              <NodeInput data={item} />
            </Form.Item>
          </Col>
        );
      case 'TextArea':
        return (
          <Col span={24} key={index}>
            <Form.Item
              name={item?.label}
              label={
                <span title={item?.labelName} style={labelStyle}>
                  {item?.labelName}
                </span>
              }
            >
              <NodeTextArea data={item} />
            </Form.Item>
          </Col>
        );
      case 'Code':
        return (
          <Col span={24} key={index}>
            <Form.Item
              name={item?.label}
              label={
                <span title={item?.labelName} style={labelStyle}>
                  {item?.labelName}
                </span>
              }
            >
              <NodeCode data={item} />
            </Form.Item>
          </Col>
        );
      case 'UserDefined':
        return (
          <Col span={24} key={index}>
            <Form.Item
              name={item?.label}
              label={
                <span title={item?.labelName} style={labelStyle}>
                  {item?.labelName}
                </span>
              }
            >
              <NodeUserDefined data={item} />
            </Form.Item>
          </Col>
        );
      case 'Boolean':
        return (
          <Col span={24} key={index}>
            <Form.Item
              name={item?.label}
              label={
                <span title={item?.labelName} style={labelStyle}>
                  {item?.labelName}
                </span>
              }
            >
              <NodeBoolean data={item} />
            </Form.Item>
          </Col>
        );
      case 'Radio':
        return (
          <Col span={24} key={index}>
            <Form.Item
              name={item?.label}
              label={
                <span title={item?.labelName} style={labelStyle}>
                  {item?.labelName}
                </span>
              }
            >
              <NodeRadio data={item} />
            </Form.Item>
          </Col>
        );
      default:
        return <></>;
    }
  });
};
